/*
 * Copyright 2021 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
//new theme for old pages in go.cd app
@import "../new_stylesheets/shared/go-variables";
@import "../new_stylesheets/shared/mixins";
@import '../new_stylesheets/shared/common';
@import '../new_stylesheets/shared/alert';
@import "normalize-scss/sass/normalize";

@include foundation-grid;
@include foundation-forms;

%page-title {
  color:       #333 !important;
  margin-top:  4px;
  font-size:   18px !important;
  font-weight: 600 !important;
}

body {
  padding:                 0;
  margin:                  0;
  font-family:             "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight:             normal;
  color:                   #0a0a0a;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:              $page-body-background;

}

ul {
  margin: 0;
}

.row {
  margin-left:  auto;
  margin-right: auto;
  @include clearfix;
  max-width:    100%;
}

.column, .columns {
  box-sizing: border-box;
}

.container {
  padding-left:  0.9375rem;
  padding-right: 0.9375rem;
  margin:        0;
  overflow:      visible;
  @include clearfix;
}

a, a:hover, a:visited {
  color: $go-links;
}

*, html, body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;

}

h1, h2, h3, h4 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: 500;

}

h4 {
  font-size: 18px;
}

.environment-listview {
  border:        1px solid #ececec;
  margin:        0px 15px;
  border-radius: 3px;
  background:    #fff;
}

.environment-listview .environment-header {
  display:  flex;
  height:   30px;
  cursor:   pointer;
  padding:  10px 50px 10px 20px;
  overflow: hidden;

  &:after {
    content:     "\f105";
    font-family: 'FontAwesome';
    position:    absolute;
    right:       35px;
    font-size:   30px;
    font-weight: 400;
    color:       #ccc;
  }

  h2.entity_title {
    font-size:     14px;
    font-weight:   600;
    color:         black;
    line-height:   30px;
    min-width:     325px;
    max-width:     325px;
    padding:       0;
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;

    &.disabled {
      color:      #999;
      font-style: italic;
    }
  }

  .key-value-pair {
    padding-left: 15px;
    line-height:  30px;
    min-width:    250px;
    max-width:    250px;

    .key {
      min-width: auto;
    }
  }
}

.environment-listview .environment-body {
  border-top: 1px solid #ececec;
  padding:    15px;
  display:    none;

  h3 {
    margin:         10px 0 20px;
    border-bottom:  1px dotted #ccc;
    padding-bottom: 10px;
  }

  .added_item ul {
    margin-left: 23px;

    li {
      margin-top: 10px;
      font-size:  rem-calc(13px);
    }
  }
}

.environment-listview.expanded {
  box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.15);

  .environment-body {
    display: block;
  }

  .environment-header:after {
    content: "\f107";
  }
}

.environment_show {
  .row {
    margin-top: 15px;
  }
}

.yui-t7 #yui-main .yui-b, .my-cruise-rounded-container {
  background: transparent;
}

#header {
  background: $header-bg;
  padding:    0 30px;
  height:     $main-nav-height;
  box-sizing: border-box;

  .header {
    background: $header-bg;
    padding:    0;
  }

  #application_logo {
    float:      left;
    background: image-url('go_logo.svg') no-repeat 0 0;
    height:     20px;
    width:      60px;
    margin:     10px 1rem 0 0px;
  }
}

//environments

.page_header {
  a.link_as_header_button {
    background: $go-primary !important;
    color:      $go-white !important;
    border:     0;

    &:hover {
      color:  $go-white;
      border: 0;

    }
  }
}

.environments .add_new_environment.add_new_environment {
  padding: 0;
  margin:  5px 0 0 0;
}

.wizard_form {
  .form_content {
    height:       auto;
    border-width: 1px 0 0 0;
    overflow:     visible;
  }

  .secure-variables {
    margin: 30px 0;
  }
}

.environment .pipeline .deployed_revisions .materials th, .environment .pipeline .deployed_revisions .materials td {
  font-size: 11px !important;
}

.environment .pipeline .deploy {
  margin-top: 10px;
}

.pipeline_bundle .pipeline .alert {
  margin: .25em 15px;
  clear:  both;
}

.ui-dialog-buttonpane, #MB_content .actions {
  background-image: none;
  border:           0;
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
}

//pipelines
.pipeline_bundle {
  padding: 0 30px;
}

#pipelines #body_content {
  background-color: transparent;
}

.content_wrapper_inner {
  padding: 15px 30px;
  margin:  0;
}

#pipelines {
  h2.entity_title {
    font-weight: 600;
    margin:      10px 0 0;

    a {
      font-weight: 600;
    }
  }

  .pipelines_selector {
    width:      370px;
    position:   relative;
    margin-top: 3px;
  }
}

#body_content {
  position:   relative;
  padding:    50px 0 0 0;
  background: transparent;
}

.page_header {
  background:      $page-header-bg;
  background-size: cover;
  position:        fixed;
  z-index:         $page-header;
  top:             40px;
  box-shadow:      0 0 0 #000;
  border:          0;
  height:          50px !important;
  box-sizing:      border-box;
  padding:         7px 30px;
  box-shadow:      0 0 10px rgba(0, 0, 0, 0.21);

  h1 {
    display: inline-block;
  }
}

h1.entity_title {
  color:       $page-header-title !important;
  margin-top:  7px;
  font-size:   17px !important;
  font-weight: 600 !important;
}

#pipelines {
  .pipelines_selector {
    .enhanced_dropdown {
      right:      0 !important;
      left:       auto !important;
      top:        31px !important;
      @extend %boxshadow;
      margin-top: 1px;
      width:      25em;

      .add_panel button.primary {
        margin-left:      10px;
        margin-right:     10px;
        width:            auto;
        background-color: $go-primary !important;
      }

      .select_all_none_panel {
        background: $personalize-header-bg;
      }

      .selector_pipeline .label {
        font-size: rem-calc(13px);
      }
    }

    .search-with-clear {
      #pipeline-search {
        margin-right:  0px;
        height:        30px;
        line-height:   16px;
        box-shadow:    none;
        border-radius: 3px 0px 0 3px;
        padding-left:  10px;
        border:        1px solid $border-color;
      }
    }

    .count {
      right: 0 !important;
      top:   31px !important;
    }

    .icon-pipeline.clear {
      right: 9px;
      top:   9px;
    }

  }

  button.submit.header_submit {
    color:            #000;
    height:           30px;
    background-color: $input-btn-bg;
    background-image: none;
    border-radius:    0 3px 3px 0;
    margin:           0;
    box-shadow:       none;
    border:           0;
    font-weight:      500;

    &:hover {
      color:            #fff;
      height:           30px;
      background-color: $input-btn-bg-hover;
    }

    &:active, &:focus {
      color:   #000;
      outline: 0;
    }

    span {
      line-height:    16px;
      text-transform: none;
      font-weight:    normal;
      font-size:      12px !important;
    }
  }
}

.select_all_none_panel {
  #select_text {
    color:       #333 !important;
    margin:      2px 0 0 10px;
    font-size:   rem-calc(12px);
    font-weight: normal !important;
  }

  #show_new_pipelines_container {
    margin: 3px 10px;
  }

  .link_as_button {
    font-size:  11px !important;
    margin:     2px 0 0 0;
    padding:    4px 7px;
    background: $btn-bg;
    color:      $btn-txt !important;

    &:hover {
      margin:     2px 0 0 0;
      font-size:  11px !important;
      padding:    4px 7px;
      background: $btn-bg-hover;
      color:      $btn-txt;
    }

    &#select_all_pipelines {
      border-radius: $global-border-radius 0 0 $global-border-radius;
      margin-right:  1px;
    }

    &#select_no_pipelines {
      border-radius: 0 $global-border-radius $global-border-radius 0;
    }
  }

  #show_new_pipelines_container {
    float: left !important;
    clear: both;
  }
}

.pipeline {
  h3.title.entity_title {
    font-weight: 600;
  }
}

.stage_bar.Passed {
  background-image: none;
  background-color: $passed;
}

.pipeline_bundle {
  .pipeline {
    border:     0;
    box-shadow: none;

    &:hover {
      box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.41);
      border:     0;
    }

    .status {
      .label {
        font-size: 12px;
        margin:    3px 10px 4px 0;

        a {
          font-weight: 700;
        }
      }
    }

  }
}

.pipeline .stages .last_run_stage {
  border-bottom: 6px solid #ccc;
}

.pipeline_bundle .pipeline_operations {
  padding: 10px 15px;
}

.pipeline_bundle .pipeline .status, .pipeline_bundle .pipeline .stages {
  margin-top: 4px;
}

.selector_header {
  margin:         0 10px 10px 10px;
  padding-bottom: 5px;
  border-bottom:  1px dotted $border-color;
}

.selector_group input {
  margin-top: 1px;
}

.selector_pipeline input {
  margin-top: 8px;
  float:      left;
}

//pipeline history


.container-in-body {
  padding: 0 !important;
}

#bd .yui-b {
  padding-top: 50px !important;
}

#bd {
  border:      0;
  margin:      0;
  padding-top: 0;
  min-width:   auto !important;
  background:  none;
}

#body_content .stage_detail_setting, .job_details .job_detail_setting {
  margin: 10px 0 0 15px;
}

.job_details {
  font-size: rem-calc(18px);
}

.admin_pause_info_and_controls {
  float:       left;
  margin-top:  7px;
  display:     flex;
  min-width:   30%;
  margin-left: 0;
}

.config-repo-pipeline-info-message {
  //these colors are copied from new component styles: gocd/gocd/server/webapp/WEB-INF/rails/webpack/views/global
  background-color: #fdf5e2;
  color:            #a2750b;
  border-color:     #fae5b2;
  font-weight:      600;
  font-size:        14px;
  height:           20px;
  line-height:      20px;
  padding:          7px 40px 7px 30px;
  border-radius:    3px;
  margin:           0 0 10px 0;
  position:         relative;
}

.pipeline_history, .yui-b .Job, .yui-b .Server, #admin-page .Administration, #my-cruise-page .Preferences {

  overflow:   hidden;
  position:   fixed;
  top:        40px;
  height:     auto;
  background: #fff;
  box-shadow: none;
  border:     0;
  padding:    10px 30px;

  h2.entity_title {
    color:       #333 !important;
    font-weight: 400 !important;
    font-size:   18px !important;
  }

}


.pipeline-instance-header {
  font-size: 12px;
}

//stage history

.two_col .rail {
  box-shadow:    none;
  border-radius: 3px;
  padding:       0;
  border:        0;
}

.stage_history {
  h3 {
    padding:       11px 10px;
    background:    $stage-history-head-bg;
    margin-bottom: 0;
    font-weight:   600;
    border:        1px solid $stage-history-head-bg;
    border-radius: $global-border-radius $global-border-radius 0 0;
  }

  .stage {
    border:       1px dotted #ccc;
    border-width: 1px 1px 0px 1px;
  }

  div.stage a.selected, .stage_history div.stage a.selected:hover {
    box-shadow:    none;
    border-radius: 0;
  }

  .stage > a {
    background:    linear-gradient(to bottom, #fff 0%, #fff 100%);
    font-weight:   600;
    border-radius: 0;

    &:hover {
      background: linear-gradient(to bottom, #fff 0%, #fff 100%);

    }
  }

  .config_change {
    padding:      8px 10px;
    border:       1px dotted #ccc;
    border-width: 1px 1px 0px 1px;
  }

  .pagination {
    font-size:     rem-calc(13px);
    margin:        0;
    padding:       10px;
    background:    $stage-history-pagination-bg;
    border-radius: 0 0 $global-border-radius $global-border-radius;
    border:        1px solid $stage-history-pagination-bg;

    a {
      font-weight: 600;
    }
  }

  .compare_pipeline {
    bottom: 10px;
  }
}

//job history

.sidebar_history #build_history_holder {
  border: 0;
}

.build_detail .sidebar_history h4.entity_title {
  padding:       12px 10px !important;
  background:    $stage-history-head-bg;
  margin-bottom: 0 !important;;
  font-weight:   600;
  border:        1px solid $stage-history-head-bg;
  border-radius: $global-border-radius $global-border-radius 0 0;
}

#build_detail_summary_container {
  background: #fff;
  padding:    10px 0;
}

.material_revision {
  font-size: 14px;
  padding:   20px;
}

//css arrows

$arrow-border-color: lighten(#000, 75%);
$arrow-border-active-color: lighten(#000, 50%);

.arrow {
  display:         inline-block;
  width:           10px;
  height:          10px;
  background:      transparent;
  text-decoration: none;
  color:           transparent;

  &:before {
    display: block;
    content: "";
    width:   10px;
    height:  10px;
    border: {
      top:  2px solid $arrow-border-color;
      left: 2px solid $arrow-border-color;
    }
  }

  &.prev {
    transform: rotate(-45deg);
    left:      0;
  }

  &.next {
    transform: rotate(135deg);
    right:     0;
  }
}

#pipeline_header .feed {
  margin-top: 6px;
}

.stages {
  .pipeline_flow {
    padding-bottom: 0;

    .pipeline {
      border:        1px solid $border-color;
      border-bottom: 0;
      border-radius: $global-border-radius $global-border-radius 0 0;
      overflow:      hidden;

      .stages {
        background:    #fff;
        padding:       10px 30px;
        border-radius: 3px 3px 0 0;
        box-sizing:    border-box;
      }
    }
  }

  .page_title_bar {
    background:    #fff;
    padding:       10px 30px;
    border:        1px solid $border-color;
    border-top:    0;
    border-radius: 0 0 $global-border-radius $global-border-radius;
    overflow:      hidden;
  }
}




//tab style

.sub_tab_container, .agent_details {
  .sub_tabs_container {
    margin-bottom: 0;
    background:    none !important;
  }
}

.sub_tabs_container li.current_tab a, .sub_tabs_container li.current_tab a:hover, .sub_tabs_container li.current a, .sub_tabs_container li.current a:hover {
  background:  $current-tab-bg;
  font-size:   rem-calc(13px);
  font-weight: 600;
  box-shadow:  0px -1px 2px 1px rgba(0, 0, 0, 0.1);

}

.steps_wrapper .tabs li.current_tab a, .sub_tabs_container li.current a {
  background:  $current-tab-bg;
  font-size:   rem-calc(13px);
  font-weight: 600;
  box-shadow:  0px -1px 2px 1px rgba(0, 0, 0, 0.1);

  &:hover {
    background: $current-tab-bg;

  }

}

.sub_tabs_container {
  background: none;
  padding:    0;
  margin:     0;

  .clear {
    display: none;
  }

  ul {
    float:         none;
    overflow:      hidden;
    padding:       10px 20px 0;
    background:    $tab-header-bg;
    border-radius: $global-border-radius $global-border-radius 0 0;

    li {
      position: relative;

      a {
        background:    $tab-bg;
        padding:       7px 15px;
        line-height:   19px;
        font-size:     13px;
        border-radius: 3px 3px 0 0;
        font-weight:   600;
        color:         #333;
      }

      a:hover {
        background: $tab-header-bg-hover;
        color:      #333;
      }

      &.current {
        a {
          background: $current-tab-bg;

        }

        &:hover {
          background: transparent;
        }
      }
    }
  }

  &.project_management,
  &.general,
  &.materials,
  &.stages,
  &.environment_variables,
  &.parameters {
    margin-bottom: 20px;
  }
}

div#tab_container {
  overflow:      hidden;
  background:    #fff;
  border-radius: 0 0 3px 3px;
  padding:       20px;
}

.definition_view {
  .nav-tabs {
    overflow:      hidden;
    padding:       5px 20px 0;
    background:    $tab-header-bg;
    border-radius: $global-border-radius $global-border-radius 0 0;
    box-sizing:    border-box;
    border:        0;

    li {
      position: relative;
      border:   0;
      margin:   0 5px 0 0;

      a {
        background:    $tab-bg;
        padding:       7px 15px;
        line-height:   19px;
        font-size:     13px;
        border-radius: 3px 3px 0 0;
        font-weight:   600;
        color:         #333;
      }

      &.active {
        a {
          background: $current-tab-bg;
        }
      }
    }
  }
}

.list_table, .simple, .filters {
  box-shadow:    none;
  border:        none;
  font-size:     rem-calc(13px);
  border-bottom: 2px solid #ccc;
  background:    transparent;
  margin:        0;

  thead {
    border: 0;

    tr {
      background:   $table-header-bg;
      color:        $txt-color;
      font-size:    rem-calc(14px);
      border-left:  1px solid $table-header-bg;
      border-right: 1px solid $table-header-bg;
    }
  }

  tr.agent_header {
    border-bottom: 3px solid $table-header-border;
  }

  th {
    background-color: $table-header-bg !important;
    background-image: none !important;
    border-bottom:    1px solid #ddd;
    white-space:      nowrap;
    font-size:        rem-calc(13px) !important;
    padding:          10px !important;
    font-weight:      600;

  }

  tbody {
    background: #fff;

    tr {
      border-right: 1px dotted #ddd;
      border-left:  1px dotted #ddd;
      font-size:    rem-calc(13px);

      &:nth-child(even) {
        background-color: #f1f1f1;
      }
    }
  }

  tr.user_header {
    border:        0;
    border-bottom: 3px solid $table-header-border;
  }
}

.notification .filters {
  min-height: auto;
}

span.contextual_help {
  width:   16px;
  height:  16px;
  padding: 0;
  display: inline-block;
}

#new_stage_container {
  .checkbox_row {
    .checkbox_row {
      margin-top: 10px;
    }
  }

  .instructions {
    margin-top: 0;
  }
}

span.contextual_help.stage_approval {
  padding-top: 0px;
}

.admin_sidebar.general {
  background:    #fff;
  padding:       20px 10px;
  border-radius: 3px;
}

ul#pipeline_config_tree {
  width: auto;
}

.instructions {
  color:      #666;
  font-size:  rem-calc(13px);
  margin-top: -10px;
}

.general li#general a, .project_management li#project_management a, .materials li#materials a, .stages li#stages a, .environment_variables li#environment_variables a, .parameters li#parameters a, .permissions li#permissions a, .stage li#stage a, .jobs li#jobs a, .stage_variables li#stage_variables a, .stage_permissions li#stage_permissions a, .settings li#settings a, .tasks li#tasks a, .artifacts li#artifacts a, .jobs_variables li#jobs_variables a, .tabs li#tabs a, .jobs_permissions li#jobs_permissions a {
  color:       #333;
  background:  $current-tab-bg;
  position:    relative;
  font-weight: 600;
  box-shadow:  0px -1px 2px 1px rgba(0, 0, 0, 0.1);

}

#pipeline_edit_form .form_buttons .submit, #stage_edit_form .form_buttons .submit, #job_edit_form .form_buttons .submit, #template_edit_form .form_buttons .submit, #group_edit_form .form_buttons .submit, #pipeline_edit_form .form_buttons .reset_button, #stage_edit_form .form_buttons .reset_button, #job_edit_form .form_buttons .reset_button, #template_edit_form .form_buttons .reset_button, #group_edit_form .form_buttons .reset_button, #stage_permissions_edit_form .form_buttons .reset_button, #pipeline_snippet_view #view_group .link_as_button, #pipeline_snippet_edit #edit_group .form_buttons .link_as_button, button.submit {
  background:  #ccc;
  color:       #333 !important;
  font-size:   rem-calc(13px);
  font-weight: 600;
  border:      0;
  min-width:   inherit;
  transition:  background-color 0.25s ease-out, color 0.25s ease-out;

  &:hover {
    background: #666;
    color:      #fff !important;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;

  }
}

.pipeline_header .toggle-new-view, .page_header a.agents-toggle-new-view, .pipelines .page_header .toggle-new-view {
  display:          inline-block;
  text-align:       center;
  line-height:      1;
  cursor:           pointer;
  transition:       all 0.3s ease-in-out;
  vertical-align:   middle;
  border:           0;
  border-radius:    $global-border-radius;
  padding:          0.5em 1em;
  background-color: $primary-btn-bg;
  color:            $go-white;
  font-size:        rem-calc(13px);
  font-weight:      600;
  position:         relative;
  margin:           0 10px;
  top:              -2px;

  &:hover {
    transition:       all 0.3s ease-in-out;
    background-color: $primary-btn-bg-hover;
    color:            $go-white;
  }
}

.pipelines .page_header .toggle-new-view {
  top: 4px;
}

.pipeline_header .analytics-link-wrapper .pipeline-analytics-icon {
  margin-right: 12px;
  padding:      0;
  font-size:    16px;
  color:        $btn-hover;
  cursor:       pointer;
}

.page_header a.agents-toggle-new-view {
  margin-top: 6px;
}

#agents_form {
  margin-top: 3px;
}

.enhanced_dropdown {
  border-bottom-color: #ccc;
  border-right-color:  #ccc;
  margin-top:          -37px;
  @extend %boxshadow;

  li:hover {
    background-color: #efefef;
  }

  a.lookup_icon {
    background-position: calc(100% - 10px) center;
  }

  &.agent_edit_popup {
    margin-top: auto;
  }

  &#new_task_popup {
    li {
      a {
        padding: 5px 10px;
      }
    }
  }
}

input.new_resource {
  width: 135px;
}

.page_header a.new_agents_page {
  font-size:       13px;
  color:           #fff;
  text-decoration: none;
  margin:          6px 0 0 10px;
  display:         inline-block;
  font-weight:     normal;
  background:      #333;
  border-radius:   3px;
  padding:         3px 5px;

  &:hover {
    text-decoration: none;
  }
}

.action_icon {
  padding-top: 0px;
}

.pipeline_operations {
  button.submit {
    line-height:   normal;
    height:        22px;
    padding:       0 !important;
    border-radius: $global-border-radius;
    box-shadow:    none;
    border:        0;

    &:hover {
      border-radius: $global-border-radius;

    }
  }
}

.enhanced_dropdown .add_panel {
  background: none;
  overflow:   hidden;
}

button#confirm-pause-up42 {
  height:      auto;
  line-height: normal;
  padding:     0 !important;
  margin-left: 10px;
  min-width:   inherit;
}

.icon16.setting {
  margin-right: 12px;
  padding:      0;

  &:hover {
    animation-name:            rotate;
    animation-duration:        2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

.sub_tab_container_content {
  background: #fff;
  padding:    0;

  #tab-content-of-configuration-xml & {
    padding: 20px 0;
  }
}

.group_pipelines .group_name_edit {
  margin: 0px 0 0 0px;
}

.group_name_delete {
  margin: 0;
}

.delete_icon_disabled.group_name_delete {
  margin-top: 3px;
}

.steps_panes .form_buttons {
  background: none;
}


.environment .pipeline .deploy button.submit {
  height:  auto;
  padding: 0 !important;
}

input.new_resource {
  height: 30px;
}

.page_header a.new_agents_page:before {
  display: none;
}


.form_heading {
  position: relative;

  #edit_config {
    margin-top:       -21px;
    right:            0 !important;
    background-color: $go-primary;
    color:            $go-white !important;
    min-width:        60px;
  }
}

#config_editor_form .buttons-group {
  padding:  10px;
  clear:    both;
  position: relative;
}

.form_buttons {
  background: none;
}

.fieldset {
  clear:         none;
  box-shadow:    none;
  border-radius: 0;
  border:        0;
  background:    none;
  margin:        0 0 20px 0;
}

//modal

#MB_caption {
  padding:     10px 20px;
  font-size:   16px;
  font-weight: 600;
}

.ui-dialog, #MB_frame_content {
  background-color: #fff;
  border:           0;
  box-shadow:       0 0 15px rgba(0, 0, 0, 0.31);
  position:         relative;
}

#MB_content .sub_tabs_container {
  margin: 5px 15px 0;
}

.change_materials .material_summary .material_name {
  margin-left: 0;
}

#MB_content .sub_tab_container, #MB_content .form_content, #MB_content .new_form_content {
  height:   369px;
  overflow: auto;
  padding:  15px;
}

//forms

input[type="text"], input[type="password"], input[type="file"], input[type="url"], textarea {

  font-size:     rem-calc(13px);
  line-height:   37px;
  border-radius: 3px;
  padding:       0 10px;
  box-shadow:    none;
  margin-bottom: 10px;
}

textarea {
  min-height:  100px;
  max-height:  200px;
  min-width:   250px;
  line-height: normal !important;

  #stage_job_form & {
    width:       400px;
    height:      auto;
    line-height: normal;
  }
}

#new_material {
  .change_materials {
    textarea {
      height:        30px;
      min-height:    30px;
      margin-bottom: 10px;
    }
  }
}

button.primary, a.primary_link_as_button, .link_as_button.primary {
  background-color: $go-primary !important;
  font-size:        rem-calc(13px) !important;
  font-weight:      700;
  border:           1px solid $go-primary;

  &:hover {
    background-color: darken($go-primary, 4%) !important;
    background-image: none;
    font-size:        rem-calc(13px);
  }

  &:focus, &:active {
    outline: 0;
  }

  span {
    font-size: rem-calc(13px) !important;
  }
}

button.submit.primary span {
  font-size: rem-calc(13px);
  color:     #fff;
}

button.submit, a.link_as_button {
  span {
    color:       $btn-txt;
    font-weight: bold;
    font-size:   rem-calc(13px);
  }

  &:hover {
    background: #666;

    span {
      color: $btn-txt;

    }
  }
}

.form_buttons button.submit {
  min-width: 75px;
}

input:focus, textarea:focus {
  background-color: rgba(182, 111, 194, 0.14);
  box-shadow:       inset 0 0 3px #b66fc2;
  box-shadow:       none;
}

#pipelines .dashboard_build_cause_like_microcontent_popups .enhanced_dropdown, #stages .dashboard_build_cause_like_microcontent_popups.fbh_microcontent_popup .enhanced_dropdown {

  border-radius: 3px;
  box-shadow:    0 0 5px rgba(152, 152, 152, 0.5);
}

#tiptip_content a, .dashboard_build_cause_like_microcontent_popups .changes table.list_table tbody td a {
  color: #0277bd;
}

.page_header
#tiptip_content a:hover, .dashboard_build_cause_like_microcontent_popups .changes table.list_table tbody td a:hover {
  color: #0277bd;
}

.list_aggregation li {
  color: #333;
}

input[type='submit'], input[type='submit']:hover, button.submit, button.submit:hover, button.submit_hover, button.submit.header_submit, button.submit.header_submit:hover, button.submit_hover.header_submit, button.ui-state-default, button.ui-state-default:hover, a.link_as_button, a.link_as_button:hover, a.link_as_button_hover, a.link_as_header_button, a.link_as_header_button:hover, a.link_as_header_button_hover, button.submit.disabled, button.submit.disabled:hover, button.submit.disabled_hover, button.submit.header_submit.disabled, button.submit.header_submit.disabled:hover, button.submit.header_submit.disabled_hover, input.submit, input.submit:hover, input.submit_hover, input.submit.disabled, input.submit.disabled:hover, input.submit.disabled_hover, a.link_as_button.disabled, a.link_as_button.disabled:hover, a.link_as_button_hover.disabled a.link_as_header_button.disabled, a.link_as_header_button.disabled:hover, a.link_as_header_button_hover.disabled {
  background:     $btn-bg;
  box-shadow:     none !important;
  font-size:      rem-calc(13px) !important;
  color:          $btn-txt !important;
  padding:        6px 10px;
  text-transform: uppercase;
  border-radius:  $global-border-radius;

  &:hover {
    background: $btn-bg-hover;
    color:      $btn-txt !important;

    span {
      color:     $btn-txt !important;
      font-size: rem-calc(13px) !important;
    }
  }
}


.Passed {
  background-image: none;
  background-color: $passed;

  a {
    @include icon-after($passed-icon, $margin: 0);
  }
}

.Failed {
  background-image: none;
  background-color: $failed;

  a {
    @include icon-after($failed-icon, $margin: 0);
  }
}

.Cancelled {
  a {
    @include icon-after($cancelled-icon, $margin: 0);
  }
}

.Passed, .Failed, .Cancelled {
  a {
    text-align:  center;
    text-indent: 0px;
    color:       white;
    line-height: 0;
    font-size:   12px;

    span {
      display: none;
    }
  }
}

.Cancelled {
  a {
    color: black;
  }
}

.color_code, .color_code_small {
  &.Passed, &.Failed, &.Cancelled {
    height:           14px;
    width:            14px;
    background-color: inherit;
    font-size:        14px;
  }

  &.Passed {
    @include icon-before($passed-icon, $margin: 0);
    color: $passed;
  }

  &.Failed {
    @include icon-before($failed-icon, $margin: 0);
    color: $failed;
  }

  &.Cancelled {
    @include icon-before($cancelled-icon, $margin: 0);
    color: $building;
  }
}

.color_code_stage, a.stage_bar, div.stage_bar {
  &.Passed, &.Failed, &.Cancelled {
    text-align: center;
  }

  &.Passed {
    color: white;
    @include icon-after($passed-icon, $margin: 0, $line-height: 1.2em);
  }

  &.Failed {
    color: white;
    @include icon-after($failed-icon, $margin: 0, $line-height: 1.2em);
  }

  &.Cancelled {
    background-image: none;
    background-color: $building;
    position:         relative;

    &:after {
      content:          "";
      background-image: image_url("building.png");
      position:         absolute;
      top:              0;
      left:             0;
      bottom:           0;
      background-size:  40px 16px;
      right:            0;
    }

    color:            $icon-txt;
    @include icon-after($cancelled-icon, $margin: 0, $line-height: 1.2em);
  }
}

li.Cancelled, .cancelled-stage {
  background-image: none;
  background-color: $building;
  position:         relative;

  &:after {
    content:          "";
    background-image: image_url("building.png");
    position:         absolute;
    top:              0;
    left:             0;
    bottom:           0;
    background-size:  40px 16px;
    right:            0;
  }
}

tr.Cancelled, tr.cancelled-stage {
  &after {
    background-image: none;
  }
}


.Building, .Active {
  background-color: $building;
  background-image: none;
}

.vsm-entity.pipeline .stages li {
  &.Building, &.building-stage {
    background-color: $building;
  }
}

.job_details_content .sub_tabs_container {
  margin-bottom: 0;
  position:      relative;
  float:         left;
  width:         calc(100% - 272px);
}

a:link#link-to-this-page, a:visited#link-to-this-page {
  position: absolute;
  right:    10px;
  top:      10px;
  color:    #333;
}

.sub_tab_container_content .ansi-color-toggle {
  margin-top: 0px !important;
}

#tab-content-of-tests, #tab-content-of-failures, #tab-content-of-artifacts, #tab-content-of-properties, #tab-content-of-junit-time, #tab-content-of-console {
  font-size: 14px;
}

#build-status-panel .sub_tab_container_content {
  padding: 20px;
}

#tab-content-of-materials {

}

.sidebar_history {
  height: 43px;

  #build_history_holder {
    padding:       0px 0px 0 !important;
    border-radius: 3px 3px 0px 0px;

    .entity_title {
      cursor:              pointer;
      -moz-user-select:    none;
      -khtml-user-select:  none;
      -webkit-user-select: none;
      -ms-user-select:     none;
      user-select:         none;
      @include icon-after(caret-down,
                          $size: 20px,
                          $margin: 0,
                          $line-height: 0.85em
      );

      &:after {
        float:         right;
        padding-right: 2px;
      }
    }

    &.open #buildlist-container {
      position: absolute;
      z-index:  101;
      top:      43px;
      bottom:   0;
      overflow: auto;
      width:    257px;

      .dropdown-menu {
        background-color: #f5f5f5;
        padding:          0;
        position:         static;
        border-radius:    0;
      }
    }
  }
}

.sidebar_history .passed .color_code_small {
  background-image: none !important;
}

#buildlist-container .buildlist li.current a, #buildlist-container .buildlist li.current a:hover {
  box-shadow: none !important;
  background: #fff !important;
}

#buildlist-container .buildlist li a {
  word-break: break-all;
  word-wrap:  break-word;
  background: linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%) !important;
}

.ui-dialog-buttonpane {
  button.submit.primary {
    color: #fff !important;
  }
}

#MB_window {
  border-radius: 3px;
  overflow:      visible;
  @include clearfix;

  .page-wrap {
    &:before {
      height: 0;
    }
  }
}

#MB_content {
  overflow:       visible !important;
  padding-bottom: 51px;
  box-sizing:     border-box;

  .flash {
    position: static;
  }

  .task.fieldset {
    padding: 1.25em 0;
  }
}

#MB_content .sub_tab_container, #MB_content .form_content, #MB_content .new_form_content {
  padding: 15px 20px;
}

.ui-dialog-titlebar, #MB_header {
  border-bottom: 2px solid #ccc;
  background:    $modal-header-bg;
  //margin-bottom: 25px;
}

.permissions .instructions {
  color:  #666;
  margin: -10px 0 0 20px;
}

#tab-content-of-source-xml {
  .heading h2 {
    display:     inline;
    font-weight: 300;
    font-size:   24px;
  }
}


.edit_panel {
  button.submit:hover span, button.submit_hover span, a.link_as_button:hover span, a.link_as_button_hover span {
    color: #333;
  }

  .add_panel {
    .add_panel {
      span {
        color: #333 !important;
      }
    }
  }

}

#search_users_table table.list_table {
  width:  96%;
  margin: 0 auto;
}

.hilighted .selectors {
  background-color: #ccc;
  border-bottom:    1px solid #ccc;
}

#tab-content-of-backup {
  .available_disk_space, .last_backup, .help {
    margin-left: 15px;
  }
}

.backup_server div.help {

  height:   auto;

  overflow: hidden;

}


form#package_repositories_edit_form {
  margin-top: 20px;
}

.steps_wrapper.sub_tabs_container {
  background-color: transparent !important;
  background-image: none !important;
  margin-bottom:    0;

  li {
    margin-right: 0;

    a {
      background: $tab-bg;

      &:hover {
        background: $tab-bg;
      }
    }
  }

}

.steps_wrapper .tabs a, .steps_wrapper .tabs a.current {
  padding: 10px 15px;
  margin:  0px 5px 0;
}

.steps_wrapper .tabs li.current_tab a {
  color: #333;
}

.my-cruise-rounded-container {

  .notification .warning, .error_message {
    background-color: #fff;
    margin:           0px 15px;
  }
}

.wizard h1, .wizard h1 strong, #tab-content-of-source-xml h1, #tab-content-of-source-xml h1 span, #my-cruise-page .sub_tab_container_content .wizard h1, #server-page h1 {
  margin: 20px 30px 30px;
}

#yui-main .content_wrapper_outer, #yui-main .content_wrapper_inner {
  padding:    0;
  background: transparent;
}

.dark-action-bar button.submit, .dark-action-bar a.link_as_button, #mailhost-configuration .form_buttons button.submit {
  min-width: 80px;
  border:    1px solid #ccc;
}

.dark-action-bar button.submit.primary {
  border: 0;
}

.dark-action-bar, #mailhost-configuration .form_buttons {
  background-color: #eee;
  padding:          0 15px 20px;
  border-radius:    0 0 3px 3px;

}

form#notification_form fieldset {
  border-radius: 3px 3px 0 0;
  border:        0;
  padding:       30px 20px;
  margin-bottom: 0;
  box-sizing:    border-box;
}

.notification caption, .notification legend {
  font-size: 13px;
}

.change_materials {
  .sub_tabs_container {
    margin-top: 30px;
  }
}

#pipelines .pipelines_selector .enhanced_dropdown .selector_group {
  border: 0;
}

.select_all_none_panel {
  a.link_as_button:hover {
    color: $go-white !important;
  }
}

#admin-holder-for-admin-config-source-xml .buttons-group #cancel_edit {
  margin-right: 0px;
  right:        0;
  min-width:    75px;
  background:   #ccc;
  color:        #333 !important;

  &:hover {
    background: #666;
    color:      #fff !important;
  }
}

#admin-holder-for-admin-config-source-xml .buttons-group #save_config {
  right:      100px;
  background: $go-primary;
  color:      $go-white !important;
  height:     27px;
  min-width:  75px;

  &:hover {
    color: darken($go-primary, 4%);
  }
}

#graphic-dialog-container {
  position:   absolute;
  text-align: center;
  transform:  translate(-50%, -80%);
  top:        50%;
  left:       50%;
}

button#signin2 {
  min-width:        100px;
  padding:          6px 9px;
  background-color: #f6f6f6;
  border:           0;
  background-image: none;
  color:            #fff !important;
  height:           35px;

  span {
    font-size: 12px !important;
    color:     #fff;
  }
}

#graphic-dialog-input #user_login, #graphic-dialog-input #user_password {
  padding:     5px 10px;
  height:      30px;
  line-height: 18px;
}

a:link.help, a:visited.help {
  margin-top: 9px;
  color:      #fff;
}

#MB_content {
  .change_materials {
    .sub_tab_container {
      height: 336px;
    }
  }
}

.treeview .preview_icon_wobg {
  top: 11px;
}

.treeview li a {
  white-space: normal;
  word-break:  break-all;
}

.admin_workspace.has_tree_view {
  margin-left: 225px;
}

.admin_workspace.has_tree_view {
  .instructions {
    margin: 0px 0 10px 0px;
  }
}

#pipelines .content_wrapper_inner {
  border: 0;
}

#pipelines #body_content .content_wrapper_inner {
  padding: 20px 0;
}

.environments {
  .icon16.setting {
    float:       none;
    margin-left: 10px;
  }

  margin-top: 5px;
}

.flash {
  position: absolute;
  width:    100%;

  .messaging_wrapper & {
    position: static;
  }
}

.ui-dialog-title, #MB_caption {
  color: #333;
}

.template_group {
  h2.entity_title {
    border: 0;
  }
}

.fieldset .form_item {
  border-bottom: 0;
}


.edit_panel button.submit, .edit_panel a.link_as_button {
  background:    $agent-header-button-bg;
  height:        30px;
  line-height:   30px;
  padding:       0 10px;
  display:       block;
  border-radius: 3px;
  margin:        0 0 0 1px;
  box-shadow:    none;
  float:         left;
  border:        0;
  color:         $go-white !important;

  span {
    color:       $go-white !important;
    font-weight: 600;

  }

  .apply_resources {
    span {
      color: $txt-color !important;
    }
  }

  &:hover {
    background:  $agent-header-button-bg !important;
    height:      30px;
    line-height: 30px;
    box-shadow:  none;
    border:      0;
    color:       $go-white !important;

    span {
      color: $go-white !important;

    }

  }

  &:focus, &:active {
    outline: 0;
  }

}

.material_options label {
  margin-top: 2px;
}

.change_materials {
  h3 {
    margin-left: 15px;
  }

  .variables .variable {
    clear:         both;
    margin-bottom: 10px;
    float:         left;
  }
}

#admin-holder-for-admin-config-source-xml .buttons-group > * {
  margin-left: 2px;
}

#show_resources_panel, #show_environments_panel, .show_panel {
  position:      relative;
  padding-right: 25px !important;

  &:after {
    content:      "";
    position:     absolute;
    top:          12px;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    border-color: #fff transparent transparent transparent;
    transition:   all 0.3s ease-in-out;
    right:        10px;
  }

  span {
    img {
      display: none;
    }
  }
}

.show_panel {
  position:      relative;
  padding-right: 25px !important;

  &:after {
    content:      "";
    position:     absolute;
    top:          12px;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    border-color: #fff transparent transparent transparent;
    transition:   all 0.3s ease-in-out;
    right:        10px;
  }

  span {
    img {
      display: none;
    }
  }
}

.agent_edit_popup {
  @extend %boxshadow;

  &:before {
    content:      "";
    position:     absolute;
    z-index:      1;
    top:          -1px;
    left:         37px;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: $go-primary transparent transparent transparent;

  }

  &.environments_panel {
    &:before {
      left: 50px;
    }
  }

  &.resources_panel {
    &:before {
      left:         24px;
      border-width: 6px 6px 0 6px;
    }
  }

  .scrollable_panel {
    padding: 10px;

    .selectors {
      padding:       10px 0;
      font-size:     13px;
      border-bottom: 1px dotted $border-color;
    }
  }

}

.admin_templates {
  .ui-dialog-titlebar, #MB_header {
    margin-bottom: 0;
  }
}

#dd_users_ajax_float {
  button.submit {

  }
}

.variable, .secure_variables {
  label {
    text-transform: uppercase;
    position:       relative;
    top:            5px;
    font-weight:    600;
  }

  .content_wrapper_inner {
    > span {
      display:       block;
      margin-bottom: 20px;
    }
  }
}

.change_materials {
  dl {
    font-size: 13px;

    dt {
      float:       left;
      font-weight: bold;
      width:       160px;
    }

    dd {
      margin:     0;
      float:      left;
      word-break: break-all;
      width:      calc(100% - 200px);
    }
  }

  .material_summaries {
    position:         relative;
    border-radius:    0;
    box-shadow:       none;
    background-color: transparent;
    border:           none;
    margin:           0;
    padding:          0px;
    float:            left;
    width:            220px;
    clear:            both;
    box-sizing:       border-box;

    .selected {
      background-color:   #fff;
      border:             1px dotted #fff;
      -moz-box-shadow:    none;
      -webkit-box-shadow: none;
      box-shadow:         none;

      &:hover {
        -moz-box-shadow:    none;
        -webkit-box-shadow: none;
        box-shadow:         none;
        border:             1px dotted #fff;

      }
    }
  }

  .variables {
    clear:         both;
    margin-bottom: 10px;
    float:         left;
    width:         100%;
  }

}

.change_materials {

  .materials {
    position:  relative;
    font-size: 11px;
    border:    1px solid #ccc;
    float:     left;
    width:     100%;

    &:before {
      content:    "";
      position:   absolute;
      left:       0;
      top:        0;
      bottom:     0;
      width:      220px;
      display:    block;
      background: #ccc;
    }

    .material_details {
      padding: 20px 20px;
      float:   left;
    }

    .comment {
      @include ellipsis();
      display:     inline-block;
      white-space: pre-wrap;
      line-height: 1.6em;
      max-height:  1.6em*2.8;
    }
  }
}

.change_materials {
  .material_summary {
    margin:        0;
    border-bottom: 1px dotted #fff;
    padding:       10px;
    border-radius: 0;

    &:hover {
      background: #eee;
    }

    .revision_number {
      word-break: break-all;
    }
  }
}

input.compare_pipeline_input {
  background-color:    #fff;
  background-position: calc(100% - 9px) center;
  padding-right:       30px;
}

.modal_timeline .form_buttons button, .modal_timeline .form_buttons a.link_as_button.primary_link_as_button {

  color: #fff !important;
}

.form_buttons {
  button.submit,
  button[type="reset"].submit {
    background:   $btn-light-bg !important;;
    color:        #333 !important;
    border-color: $border-color;

    span {
      color: #333 !important;
    }

    &:hover {
      background: $btn-light-bg-hover !important;

      span {
        color: #fff !important;
      }
    }
  }

  button.submit.primary {
    background:   $go-primary !important;
    color:        #fff !important;
    border-color: $go-primary;

    span {
      color: #fff !important;
    }

    &:hover {
      background: $go-primary !important;
    }
  }

  button.submit.primary[disabled] {
    background: $btn-light-bg !important;
    border:     1px solid $btn-light-bg !important;
  }
}

.unpause_wrapper button.primary {
  background-color: #666 !important;
  height:           22px;
  border:           1px solid #666;

  &:hover {
    background-color: #666 !important;
  }
}

.pause_wrapper button.submit {
  height: 22px;
  border: 1px solid #ccc;
}

#stages .build_cause .modified_files div {
  padding: 2px 5px 5px 20px;
}

.show_panel.submit_small.dashboard_build_cause_button {
  padding-right:       16px !important;
  background-position: right 5px !important;
}

.pipeline_bundle .pipeline_operations {
  .pause_wrapper button.submit {
    border: 0;
  }
}

#pipeline_status_bar .pipeline .stages .selected .stage_bar_wrapper {
  background-repeat: repeat-x;
}

.form_content.exec_task_editor {
  .gist_panel {

    min-height:    75px;
    max-height:    290px;
    padding:       10px 0 0 10px;
    background:    #f5f5f5;
    border-radius: 3px;
    border:        1px #ccc solid;
  }
}

.user_permissions_for_group, .role_permissions_for_group {
  .action_icon {
    margin-top: 10px;
  }
}

$new-theme-material-popup-user-width: 20em;
$new-theme-material-popup-comment-width: 32em;
$new-theme-material-popup-hash-width: 12em;
$new-theme-material-popup-vsm-width: 4em;
$new-theme-material-popup-revision-width: ($new-theme-material-popup-hash-width + $new-theme-material-popup-vsm-width);
$new-theme-material-popup-width: ($new-theme-material-popup-user-width + $new-theme-material-popup-comment-width + $new-theme-material-popup-revision-width);

@mixin new-theme-changes-table {
  td.user, td.modified_by {
    max-width: $new-theme-material-popup-user-width;
    width:     $new-theme-material-popup-user-width;
  }

  td.comment {
    word-wrap:  break-word;
    word-break: keep-all;
    max-width:  $new-theme-material-popup-comment-width;
    width:      $new-theme-material-popup-comment-width;
  }

  td.revision {
    overflow:      hidden;
    max-width:     $new-theme-material-popup-hash-width;
    width:         $new-theme-material-popup-hash-width;
    font-family:   "courier new", monospace !important;
    font-style:    normal;
    white-space:   nowrap;
    text-overflow: ellipsis;
    overflow:      hidden;
  }
}


#pipelines .enhanced_dropdown, #stages .fbh_microcontent_popup .enhanced_dropdown, #pipelines .enhanced_dropdown .scrollable_panel {
  max-width: $new-theme-material-popup-width;
  z-index:   2 !important;

  .build_cause.list_table {
    .change {
      @include new-theme-changes-table;

      td.revision {
        width:     $new-theme-material-popup-revision-width;
        max-width: $new-theme-material-popup-revision-width;

        span.wrapped_word {
          vertical-align: text-bottom;
          font-family:    "courier new", monospace !important;
          font-style:     normal;
          max-width:      $new-theme-material-popup-hash-width;
          display:        inline-block;
          white-space:    nowrap;
          text-overflow:  ellipsis;
          overflow:       hidden;
        }
      }
    }
  }
}

#plugin_settings_angular_plugin_settings {
  textarea {
    resize:      both;
    height:      inherit;
    font-family: "courier new", monospace !important;
    font-size:   14px;
    line-height: 1.25em;
  }
}

.vsm-entity.pipeline ul.instances {
  height: 61px;

  .instance {
    margin-top: 0px;
  }

  ul.stages {
    margin-top: 10px;
  }

  .duration {
    font-size: 11px;
  }

  .message {
    padding: 0 7px;
  }
}

//plugins

ul.plugins .plugin {
  padding:       20px;
  border-top:    0;
  border-bottom: 1px dotted #ccc;
  position:      relative;

  .plugin-details {
    margin-bottom: 10px;
  }

  .plugin-logo {
    background-color: transparent;
  }

  .description {
    font-size: 14px;
  }

  .key {
    color:        #6b6b6b;
    font-weight:  500;
    margin-right: 10px;
  }

  .more-info-detail {
    font-size: 13px;
  }

  .plugin-messages li {
    font-size:   12px;
    line-height: 18px;
  }
}

//add user & modal

span#add_error_message {
  display: block;
  margin:  0 15px 10px;
}

input#search_id {
  background-position: calc(100% - 8px) center;
}

button.check_connection + .connection_test_message pre {
  background: #000;
  color:      #fff;
  padding:    15px 20px;
}

#my-cruise-page .sub_tab_container_content .wizard h1 {
  margin:      0;
  padding-top: 20px;
  color:       #333;

  strong {
    color: #333;

  }
}

.enhanced_dropdown {
  .list_table {
    font-weight: 600;

    tbody {
      background: transparent;

      tr:nth-child(even) {
        background-color: transparent;
      }
    }

  }
}

.Failing {
  position: relative;
}

.Building, .building-stage {
  position:        relative;
  background:      $building image_url('building.gif') repeat-x;
}

.stage_bar.Building {
  background:      $building image_url('building.gif') repeat-x;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.stage_history {
  .Building {
    > span {
      height: 12px;
    }
  }
}

.building-stage {
  span {
    height: 12px;
  }

}

.Building, .Cancelled, .Failing {
  a {
    position: absolute;
    left:     0;
    top:      0;
    right:    0;
    z-index:  1;
    bottom:   0;
  }
}


#filter_help {
  margin-top: 0px;
}

.tristate {
  background-position: 0 5px;
}

.promote_button {
  background-color: transparent;

  .promote_up, .promote_down {
    background-color: transparent;

  }
}

table.variables th {
  font-size:      14px;
  padding-bottom: 5px;
}

.has_tree_view #form_parent {
  padding: 20px 0;
}

.action_icon {
  line-height: 16px;
}

.artifacts_plan_section {
  table.artifact {
    margin-bottom: 10px;

    h4 {
      margin-bottom: 10px;
    }
  }
}

.back_to_top {
  border-radius: 50%;
}

.overview_widget .job .elapsed_time {
  white-space: normal;
}

.ansi-color-toggle {
  margin-top: 0 !important;
}

#buildlist-container .buildlist li {
  a {
    position: relative;
    padding:  10px 10px 10px 30px !important;;
  }

  .color_code_small {
    position: absolute;
    left:     10px;
    top:      15px;
  }
}

.build_detail .sidebar_history .time_ago {
  margin-left: 0 !important;
}

.changes_button_wrapper button.submit, .operate button.submit, .deploy button.submit, .pause_wrapper button.submit {
  background-color: #dedede;
}

#error-container {
  margin-top: -40px;
}

#graphic-dialog {
  margin: 0 auto;
}

.exec_task_editor {
  label.inline {
    display:       inline-block;
    margin-bottom: 5px;
  }

  textarea.exec-task-arguments {
    height: 100px;
  }
}

.change_materials .smartfill_content .user {
  white-space: normal;
}

#content_area textarea {
  width:      100%;
  max-height: 620px;
}

pre, code, #admin-holder-for-admin-config-source-xml textarea {
  overflow-x: auto !important;
}

.add-filter p.mycheckin {
  padding-top: 25px !important;
}

.buildoutput_pre {
  width:      100%;
  box-sizing: border-box;
  padding:    10px 10px 40px 10px;
  min-height: calc(100vh - 480px);
}

.old-agent-button-group {
  li {
    position: static;

    .button {
      border-radius: 0;
    }
  }
}

.pagination {
  border: 0;
  margin: 0 30px;

  .pages {
    border-radius: 3px;
  }
}

.wizard .aside {
  padding: 0 0 0 20px;
}

.wizard .section {
  box-sizing: border-box;
  padding:    20px;
}

.admin-rounded-container, #yui-main .content_wrapper_inner, .my-cruise-rounded-container, #server-page .rounded-corner-for-pipeline {
  padding: 15px 0;
}

.my-cruise-rounded-container {
  margin: 0 30px;
}

.content_wrapper_inner {
  .admin-rounded-container {
    padding: 0;
  }
}

.environment.show_environment {
  @include clearfix;
  background: #fff;
  padding:    20px;
  box-sizing: border-box;
  margin:     0px 15px 0px 15px;
  border:     1px solid #ddd;

  h3 {
    margin:         10px 0 20px;
    border-bottom:  1px dotted #ccc;
    padding-bottom: 10px;
  }

  .added_item ul {
    margin-left: 23px;

    li {
      margin-top: 10px;
      font-size:  rem-calc(13px);
    }
  }
}

button.edit-environment {
  float:        none;
  margin-right: 0;
}

.template_group h2.entity_title {
  background-position: -12px -15px;
  font-size:           18px;
  margin-top:          7px;
  font-weight:         400;
}

#oauth_page {
  h1 {
    margin-bottom: 20px;
  }
}

#build-status-panel {
  padding: 0 30px;
}

.job_details_content .build_detail_container {
  margin-right: 0px !important;
  clear:        left;

  #tab-content-of-materials .material_revision {
    padding:       20px !important;
    margin-bottom: 0;
  }
}

.overview_widget {
  h3 {
    font-size:     rem-calc(14px);
    margin-bottom: 20px;
    padding:       13px 10px;
  }
}

.overview_widget {
  .job_grouping {
    margin:        0 20px 0 0;
    border-bottom: 1px dotted $border-color;
    padding:       6px 0;

    .color_code_small {
      &.Active, &.Cancelled {
        margin-top: 0;
      }
    }
  }
}

.hidereveal_expander {
  font-size: rem-calc(13px);
}

.content #tab_container div.jobs {
  width: 225px;

  .wrapped_word {
    font-size: 13px;
  }
}

.content #tab_container .materials_overview_wrapper {
  margin-left: 240px;
}

//icon replacements

%iconstyles {
  background:  none;
  font-size:   rem-calc(13px);
  transition:  all 0.1s ease-in-out;
  color:       $icon-txt;
  font-weight: 600;

  &:before {
    color:       $icon-color;
    margin:      0 5px;
    font-weight: 600;
    transition:  all 0.1s ease-in-out;
  }

  &:visited {
    color: $icon-txt;
  }

  &:hover {
    color:      $icon-txt-hover;
    transition: all 0.1s ease-in-out;
    background: none;
  }

}

.preview_icon {
  @include icon-before($type: search);
  @extend %iconstyles;

}

.view_icon {
  @include icon-before($type: eye);
  @extend %iconstyles;

}

.edit_icon {
  @include icon-before($type: edit);
  @extend %iconstyles;
}

.edit_icon_disabled {
  @include icon-before($type: edit);
  background: none;
  color:      #999;
  cursor:     default;
  font-size:  rem-calc(13px);

  &:before {
    font-size: rem-calc(13px);
    color:     #999;
    margin:    0 5px;
  }
}

.delete_icon {
  @include icon-before($type: remove);
  @extend %iconstyles;
}

.delete_icon_disabled {
  @include icon-before($type: remove);
  background: none;
  color:      #ccc;
  font-size:  rem-calc(13px);
  cursor:     not-allowed;

  &:before {
    color:     #ccc;
    font-size: rem-calc(13px);
    margin:    0 5px;
  }
}

.view_icon_disabled {
  @include icon-before($type: eye);
  background: none;
  color:      #999;
  cursor:     default;
  font-size:  rem-calc(13px);

  &:before {
    font-size: rem-calc(13px);
    color:     #999;
    margin:    0 5px;
  }
}

.icon_remove {
  @include icon-before($type: times-circle, $color: #e57373, $size: rem-calc(16px));
  @extend %iconstyles;
  height: auto;
  width:  auto;

}

.contextual_help, div.contextual_help, span.contextual_help {
  @include icon-before($type: question-circle);
  background: none;
  height:     auto;
  width:      auto;
  margin:     10px 0 0 5px;

  &:before {
    color:     $icon--secondary-color;
    font-size: 16px;
    margin:    0 5px;
  }

  &:hover {
    background: none;
  }
}

a.add_item {
  padding:          0;
  display:          block;
  width:            55px;
  margin:           10px 0;
  text-decoration:  none;
  background-image: none;
  height:           auto;

}

.add_link, .add_icon, a.add_item {
  @include icon-before($type: plus-circle, $size: rem-calc(16px), $color: $add-color);
  background:  none;
  font-size:   rem-calc(13px);
  transition:  all 0.1s ease-in-out;
  font-weight: 600;
  color:       $icon-txt;
  padding:     5px 0;

  &:before {
    margin:      0 5px;
    font-weight: 600;
    transition:  all 0.1s ease-in-out;
  }

  &:visited {
    color: $icon-txt;
  }

  &:hover {
    color:      $icon-txt;
    transition: all 0.1s ease-in-out;
    background: none;
  }

}

.add_icon_disabled {
  @include icon-before($type: plus-circle, $size: rem-calc(16px), $color: $disabled-icon-color);
  background:  none;
  font-size:   rem-calc(13px);
  transition:  all 0.1s ease-in-out;
  font-weight: 600;
  color:       $disabled-icon-color;
  padding:     5px 0;
  cursor:      not-allowed;

  &:before {
    margin:      0 5px;
    font-weight: 600;
  }

  &:visited {
    color: $disabled-icon-color;
  }

  &:hover {
    color:      $disabled-icon-color;
    background: none;
  }
}

.move_icon {
  @include icon-before($type: arrow-circle-o-right);
  @extend %iconstyles;
}

.export_icon {
  @include icon-before($type: arrow-down);
  @extend %iconstyles;
}

.clone_icon {
  @include icon-before($type: clone);
  @extend %iconstyles;
}

.lock_icon {
  @include icon-before($type: lock);
  @extend %iconstyles;
}

.lock_icon_disabled {
  @include icon-before($type: lock);
  background: none;
  color:      #999;
  cursor:     default;
  font-size:  rem-calc(13px);

  &:before {
    font-size: rem-calc(13px);
    color:     #999;
    margin:    0 5px;
  }
}

//config pages

.admin_workspace .pipeline_header {
  padding: 0 0 10px 0;
  border:  0;
}

.admin_workspace h3.title.entity_title {
  padding:     4px 0 7px 40px;;
  display:     inline-block;
  margin:      0;
  font-weight: 600;
  border:      0;
  font-size:   rem-calc(18px);
}

.admin_workspace.has_tree_view {
  padding:       20px;
  border-radius: 3px;
  background:    #fff;

  .fieldset {
    padding: 0;
  }

}

.admin_workspace h3 {
  display:       inline-block;
  border-bottom: none;
  margin-bottom: 20px;

}

.admin_wrapper #form_parent form, #admin_tasks table.reorderable_table {
  margin-top: 0;
}

.config-container {
  @include clearfix;
  padding: 0 20px 30px;

  label {
    font-size: 14px;
  }

  .form_item_block {
    padding-bottom: 0;
  }

  h3 {
    font-weight: 600;
  }

  .checkbox_row {
    margin-bottom: 20px;
  }

  .form_item {
    margin-bottom: 30px;
  }

  .checkbox_label_wrapper {
    margin-bottom: 5px;

    .contextual_help {
      top:  2px;
      left: -16px;
    }
  }

  .inline_instruction {
    display:    block;
    font-style: normal;
    font-size:  rem-calc(12px);
  }

  .form_buttons {
    margin:        20px 0 0 0;
    padding:       0;
    background:    none;
    border-radius: $global-border-radius;

    a.skip_dirty_stop {
      margin-left: 0;
    }
  }

}

.warnings, .information {
  margin: 10px 0;
}

.help-wrapper {
  @include clearfix;

  .contextual_help, div.contextual_help, span.contextual_help {
    margin-top: 9px;
  }

  .checkbox_row & {
    span.contextual_help {
      margin-left: -10px;
    }
  }
}

#tiptip_content {
  box-shadow:  none;
  font-size:   rem-calc(13px);
  line-height: 18px;
  font-weight: 600;
}

.checkbox_row div.contextual_help {
  margin-left: -10px;
}

.name_value_cell.icon_remove_cell {
  vertical-align: top;
}

.config-materials {
  .contextual_help, div.contextual_help, span.contextual_help {
    position: relative;
    top:      6px;
  }
}

.config-general {
  .contextual_help, div.contextual_help, span.contextual_help {
    position: relative;
    top:      5px;
  }

  .radio_button_row .contextual_help {
    top: 0px;
  }
}

.config-env-variables {
}

.config-job-settings {
  .inline_instruction {
    position: relative;
    top:      -10px;
  }

  .checkbox_row {
    margin-bottom: 0;
  }

  input#job_timeout {
    float: none;
  }

}

.form-section {
  margin-bottom: 15px;
}

#new_material_popup {
  margin-left: 0;
}

.admin-tab-contents {

}

.admin-tab-contents {
  padding: 20px 30px;

  h1 {
    font-weight:    600;
    margin:         20px 0 40px 0;
    border-bottom:  1px solid $border-color;
    font-size:      20px;
    padding-bottom: 10px;
  }

  .title_secondary_info {
    float: right;
  }

  .title_action_wrapper {
    ul {
      margin-top:  1px;
      margin-left: 10px;

      li {
        a {
          margin-left:  0px;
          padding-left: 10px;
        }

        .delete_icon_disabled {
          margin-top: 3px;
        }

        .delete_icon {
          margin-left:  10px;
          padding-left: 0;
        }

        > span {
          padding-left: 10px;

        }
      }
    }
  }

  h2.entity_title {
    color:               $txt-color;
    font-size:           rem-calc(17px);
    line-height:         20px;
    font-weight:         600;
    border-bottom:       0;
    padding:             0 0 0 37px;
    background-size:     40px 40px;
    background-position: -8px -10px;
  }

  .list_table {
    .actions {
      .delete_icon_disabled {
        margin-top: 3px;
      }
    }
  }

  .heading {
    border-bottom:  1px solid $border-color;
    padding-bottom: 10px;
    margin-bottom:  20px;

    h2 {
      font-size: 20px;
    }

    span {
      margin-top: 12px;
    }
  }

  .fieldset {
    padding: 20px 0;
  }

  .permissions .instructions {
    margin: -10px 0 0 0;
  }

  .fieldset .form_item {
    border-bottom:  0;
    margin-bottom:  0;
    padding-bottom: 0;
  }

  .roles {
    white-space: nowrap;
  }
}

#tab-content-of-source-xml .heading h2 {
  font-size: 20px;
}

form#package_repositories_edit_form {
  margin-top: 0;
}

.tasks_list_table .icon_remove, .jobs_list_table .icon_remove {
  margin-top: 0px;
}

.error-message-for-old-args {
  clear: both;
}

.admin_configuration, .admin_pipeline_groups, .admin_templates, .admin_server, .admin_users, .oauth2_provider_clients, .admin_backup, .admin_plugins_plugins, .admin_package_repositories {
  .flash#config_error {
    position: static;
  }
}

.job_tabs_section,
.artifact {
  span.contextual_help {
    position: relative;
    top:      -13px;
  }
}

#stage_job_form {
  .fieldset {
    padding: 1.25rem 0;
  }
}

.on_cancel_task {
  .task_entry {
    clear: both;
    float: left;
    width: 100%;
  }
}

.agent_details_pane div {
  clear: both;
}

.templates {
  .list_table {
    .action_icon {
      padding-left: 0;
    }
  }
}

#new_template_container {
  .instructions {
    margin-top: -10px;
  }
}

.path_textbox {
  box-shadow: none;

  label {
    padding:    7px 4px 7px 6px;
    background: #e5e5e5;
  }
}

#new_pipeline_group_container {
  .form_error {
    padding: 0 7px;
  }
}

#new_job_container {
  .fieldset {
    padding: 10px 0;
  }

  h3 {
    margin: 0 0 20px 0;
  }

  .override_timeout.checkbox_row {
    input {
      float:        none;
      margin-right: 10px;
    }

    label {
      margin: 0 10px 0 0;
    }

    input.in_between_text {
      margin-left: 0;
    }
  }

  p.required {
    margin-top:    -35px;
    margin-bottom: 30px;
  }

  .form_item {
    padding-bottom: 0;

    .fieldset {
      margin-bottom: 0;
    }
  }
}

.change_materials {
  .form_item_block.checkbox_row.material_options {
    label {
      margin-top: -3px;
    }
  }
}

.content_wrapper_outer {
  clear: both;
}

.edit_icon_disabled, .lock_icon_disabled, .view_icon_disabled {
  margin-top: 3px;
}

#links {
  margin:  7px 0 0 10px;
  display: inline-block;

  .action_icon {
    padding-left: 0;
  }

  span, a {
    margin-left: 10px;
  }
}

body#login-page {
  .page-wrap:before {
    height: 0;
  }

  #error-container {
    margin-top: -50px;
  }
}

.change_materials .materials .content_wrapper_outer {
  clear: right;
  float: none;
}

.config-materials .action_icon.delete_icon_disabled {
  padding-left: 3px;
}

.btn-primary {
  display:       inline-block;
  padding:       10px;
  border-radius: 3px;
  color:         #fff;
  font-size:     14px;
  font-weight:   600;
  background:    #b66fc2 !important;

  &:hover, &:visited {
    text-decoration: none;
    color:           #fff;
  }
}

.status-report-btn {
  right:    20px;
  position: absolute;
}

.btn-small {
  padding:   4px 9px;
  font-size: 12px;
}

.status-report-btn-small {
  margin-left: 10px;
  position:    absolute;
  top:         8px;
}

//page title header styles

ul.entity_title {
  @extend %page-title;

  li {
    background:    none;
    margin-right:  0;
    line-height:   normal;
    padding-right: 0px;

    &:after {
      content:    "";
      background: image_url("g9/backgrounds/icon_breadcrumb_arrow.png") no-repeat scroll 0 0 transparent;
      display:    inline-block;
      margin:     0 6px;
      width:      10px;
      height:     10px;
    }

    a {
      font-size:   rem-calc(15px);
      font-weight: 600 !important;
      line-height: normal;

      &:hover {
        text-decoration: underline;
      }

    }

    &.last {
      &:after {
        display: none;
      }

      h1 {
        margin:      0 10px 0 0 !important;
        color:       #666 !important;
        font-size:   15px !important;
        font-weight: 600 !important;
        line-height: normal;
      }

    }
  }
}

.page_header {
  span.page_name {
    float:       left;
    height:      50px;
    line-height: 51px;
    padding:     0 20px;
    margin:      -8px 10px 0 0;
    display:     block;
    font-size:   rem-calc(17px);
    font-weight: 600;
    position:    relative;

    &:after {
      content:      "";
      position:     absolute;
      right:        5px;
      top:          11px;
      width:        0;
      height:       30px;
      border-right: 2px solid #ccc;
    }
  }

  ul.entity_title {
    margin-top: 10px;

    li {
      position: relative;

      &.last {
        label {
          font-size: rem-calc(10px) !important;
        }
      }
    }

    .label {
      position:  absolute;
      font-size: rem-calc(10px);
      top:       -8px;

    }

    .run_no {
      color:       #666;
      font-size:   15px;
      font-weight: 600;
    }
  }
}

.entity_status_wrapper {
  .page_header {
    span.page_name {
      height: 50px;
    }
  }
}

//Dashboard

.pipeline_run_label {
  font-size:     12px;
  display:       block;
  margin-bottom: 5px;
  font-weight:   600;
  color:         #333;

  .vsm-entity & {
    float:         left;
    font-size:     11px;
    width:         160px;
    overflow:      hidden;
    text-overflow: ellipsis;
  }

  .vsm-entity.current & {
    width: 230px;
  }
}

.vsm_link_wrapper {
  margin-left: 5px;
  font-size:   11px;

  .vsm-entity & {
    font-weight: 600;
    margin-top:  1px;
    float:       right;
  }

  a {
    text-decoration: underline;
  }
}

.dashboard_pipeline_instance {
  margin-bottom: 5px;

  .pipeline_run_label {
    display: inline-block;
  }
}

.status.details a {
  text-decoration: underline;
}

#MB_window {
  border-radius: 3px;

  &:not(.small) {
    @media screen and (min-width: 40em) {
      width:     90% !important;
      max-width: 75rem !important;
    }
  }

  #MB_frame {
    border-radius: 3px;
  }

  #MB_frame_right {
    border-radius: 3px;
  }

  #MB_frame_content {
    border-radius: 3px;
  }

  #MB_header {
    padding:       13px 10px;
    border-radius: 3px;
    background:    #e0dfdf;
  }

  #MB_caption {
    font-weight: 600;
    font-size:   18px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    margin:      5px 0 5px 15px;
    padding:     0;
  }

  #MB_close {
    text-indent: 0;
    color:       #8a8a8a;
    font-weight: normal;
    top:         11px;
    right:       17px;

    &:before {
      font-size: 32px;
      content:   '×';
      width:     25px;
      height:    25px;
    }

    background:  none;
  }

}

.add_new_artifact {
  margin-top: 15px;
}

.artifact {
  border-bottom: 1px solid $border-color;
  padding:       25px 0 5px;

  .type_label {
    font-weight: bold;
  }

  .icon_remove {
    display: inline-block;
  }
}

.plugin_form_background {
  background-color: $artifact-plugin-form-background;
}

.plugin_dropdown_background {
  background-color: $artifact-plugin-message-background;
}

.plugin_dropdown_background .columns {
  padding-top: 20px;
}

.plugin_form_background .columns {
  padding-top: 10px;
}

.plugin-select-form span {
  margin-bottom: 20px;
  display:       block;
}

.plugin-select-form span.contextual_help {
  display:  inline-block;
  margin:   0;
  position: relative;
  top:      2px;
}

.add_new_artifact label {
  display: inline-block;
}

.add_artifact_button {
  float:   none;
  display: inline-block;
}

.plugin_key_value .plugin-config-read-only, .plugin_key_value.plugin-config-read-only {
  line-height: 20px;
}

.plugin_key_value.plugin-config-read-only {
  padding: 10px;
}

#tab-content-of-artifacts .artifact {
  padding: 0 0 5px 25px;
}

//Note: this is used in Admin > Template > view
//start: template view
#templates .definition_view ul.artifact_key_value_pair {
  width:         100%;
  margin-bottom: 20px;
}

#templates .definition_view ul.artifact_key_value_pair li {
  width:         100%;
  border-bottom: 1px solid #ddd;
}

#templates .definition_view ul.artifact_key_value_pair li label {
  max-width: 49%;
  display:   inline-block;
  width:     49%;
  font-size: 12px;
}

#templates .definition_view ul.artifact_key_value_pair li label .key {
  font-weight: 600;
}

#templates .definition_view ul.artifact_key_value_pair li label .key:after {
  content: ':';
  padding: 0 5px;
}

#templates .definition_view .artifact_title {
  padding-bottom: 10px;
  font-weight:    600;
}

#templates.layout.admin-entity.view .content {
  width: auto;
}

//end: template view

.hide {
  display: none;
}

//edit material

.password_field {
  position: relative;

  .form_input {
    padding-right: 35px;
  }
}

.hide_password {
  @include icon-before($type: eye-slash);
  position:   absolute;
  left:       212px;
  background: transparent;
  top:        5px;
  font-size:  17px;
  outline:    none;
  cursor:     pointer;
}

.show_password {
  @include icon-before($type: eye);
  position:   absolute;
  left:       212px;
  background: transparent;
  top:        5px;
  font-size:  17px;
  outline:    none;
  cursor:     pointer;
}

.change_password {
  clear:         both;
  font-size:     13px;
  display:       block;
  margin-bottom: 10px;
}

button#allow_edit_password {
  outline: none;
}

// hack needed for the show template modal on pipelines page. See `show_template_modal_shim.tsx`
.component-modal-container {
  // avoid applying any styles from the "old" css
  // begin reset all styles of all children
  all: revert;
  * {
    all: revert;
  }
  // end reset all styles of all children

  // apply css normalize
  @include normalize();

  // force some reasonable defaults see `body` in `global.scss`
  font-size: 14px;
  line-height: 1.5;
}

.quick_edit_button {
  float: right !important;
}
